<template>
	<view>
		<view class="uni-list">
			<view class="uni-list-cell">
				<view class="uni-list-cell-left">
					<view class="uni-label">工程名称</view>
				</view>
				<view class="uni-list-cell-right">
					<view class="uni-input">{{costInfo.projectName}}</view>
				</view>
			</view>
			
			<view class="uni-list-cell">
				<view class="uni-list-cell-left">
					<view class="uni-label">项目名称</view>
				</view>
				<view class="uni-list-cell-right">
					<view class="uni-input">{{costInfo.projectItemName}}</view>
				</view>
			</view>
			
			<view class="uni-list-cell">
				<view class="uni-list-cell-left">
					<view class="uni-label">报销名称</view>
				</view>
				<view class="uni-list-cell-right">
					<view class="uni-input">{{costInfo.costName}}</view>
				</view>
			</view>
			
			<view class="uni-list-cell">
				<view class="uni-list-cell-left">
					<view class="uni-label">报销描述</view>
				</view>
				<view class="uni-list-cell-right">
					<view class="uni-input">{{costInfo.costDesc}}</view>
				</view>
			</view>
			
			<view class="uni-list-cell">
				<view class="uni-list-cell-left">
					<view class="uni-label">报销类型</view>
				</view>
				<view class="uni-list-cell-right">
					<view class="uni-input">{{costInfo.costType}}</view>
				</view>
			</view>
			
			<view class="uni-list-cell">
				<view class="uni-list-cell-left">
					<view class="uni-label">报销金额</view>
				</view>
				<view class="uni-list-cell-right">
					<view class="uni-input">{{costInfo.costAmount}}</view>
				</view>
			</view>
			
			<!-- <view class="uni-list-cell">
				<view class="uni-list-cell-left">
					<view class="uni-label">报销数量</view>
				</view>
				<view class="uni-list-cell-right">
					<view class="uni-input">{{costInfo.costCount}}</view>
				</view>
			</view> -->
			
			<view class="uni-list-cell">
				<view class="uni-list-cell-left">
					<view class="uni-label">报销时间</view>
				</view>
				<view class="uni-list-cell-right">
					<view class="uni-input">{{costInfo.createTime}}</view>
				</view>
			</view>
			
			
			<view class="uni-list-cell">
				<uni-steps :options="checkSteps" :active-color="activeColor" :active="stepState" direction="column" />
			</view>
			<!--  -->
			<view class="uni-list-cell" v-if="stepState === 1">
				<view class="uni-list-cell-left">
					<view class="uni-label">审核理由</view>
				</view>
				<view class="uni-list-cell-right" style="word-wrap:break-word;">
					<view 
					v-bind:class="{ 'uni-input': !costInfo.approveReason }" 
					style="padding: 7px 12px;line-height:25px;font-size:14px;background:'#fff';flex:1;">{{ !costInfo.approveReason || costInfo.approveReason === "" ? '无' : costInfo.approveReason}}</view>
				</view>
			</view>
			
			<view class="uni-list-cell">
				<view>
					<view class="uni-image-item" v-for="(value, index) in costInfo.costImages" :key="index">
						<image class="uni-image" mode="scaleToFill"
							:src="value.minImage"
							:data-src="value.fullImage"
							@tap="previewImage" ></image>
					</view>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	import { getCostApplyById } from '@/api/projectCostInfo.js'
	import { costInfoImgUrl, costInfoMinImgUrl } from '@/utils/index.js'
	export default {
		onLoad(options) {
			if(!options || !options.id) {
				uni.navigateBack({delta:1});
				return;
			}
			this.costId = decodeURIComponent(options.id);
		},
		onPullDownRefresh() {
			this.getCostInfo();
		},
		onShow(){
			this.getCostInfo();
		},
		data() {
			return {
				costId: undefined,
				costInfo: {},
				stepState: 0,
				checkSteps: [],
				images: [],
				activeColor: '#00aaff'
			}
		},
		methods: {
			getCostInfo(){
				getCostApplyById(this.costId)
				.then(resp => {
					this.costInfo = resp.datas;
					this.costInfo.costImages = resp.datas.images.map(x => 
					({ 
						fullImage: costInfoImgUrl(x),
						minImage: costInfoMinImgUrl(x)
					}));
					this.images = resp.datas.images.map(x => costInfoImgUrl(x));
					
					this.checkSteps = [];
					this.checkSteps.push({
						title: "创建",
						time: "创建时间：" + this.costInfo.createTime,
						desc: "创建人：" + this.costInfo.userName 
					});
					if(this.costInfo.state === 0) {
						this.stepState = 0;
						this.checkSteps.push({
							title: "审核",
							time: "审核时间：",
							desc: "审核人：" 
						});
						this.activeColor = '#00aaff';
					}
					else if (this.costInfo.state === 1) {
						// 审核成功
						this.stepState = 1;
						this.checkSteps.push({
							title: "审核",
							time: "审核时间：" + this.costInfo.approveTime,
							desc: "审核人：" + this.costInfo.approveUser,
						});
						this.activeColor = '#1aad19'
					}
					else if (this.costInfo.state === 2) {
						// 退审状态
						this.stepState = 1;
						this.checkSteps.push({
							title: "退审",
							time: "退审：" + this.costInfo.approveTime,
							desc: "审核人：" + this.costInfo.approveUser,
						});
						this.activeColor = '#ff4f4f'
					}
					uni.stopPullDownRefresh();
				})
				.catch(error => {
					uni.stopPullDownRefresh();
					uni.showToast({
						title: error,
						duration: 2000,
						icon: "none"
					});
				});
			},
			
			// 图片全屏查看
			previewImage: function(e) {
				var current = e.target.dataset.src;
				uni.previewImage({
					current: current,
					urls: this.images
				})
			},
		}
	}
</script>

<style>
	
	.uni-image-item {
		width: 300rpx;
		height: 300rpx;
		/* border:2rpx solid #D30000; */
		border-radius: 10rpx;
		display: inline-block;
		margin: 20rpx;
	}
	
	.uni-image {
		width: 300rpx;
		height: 300rpx;
	}
	.pre-space {
		word-break: break-word; /* 文本行的任意字内断开 */
		word-wrap: break-word; /* IE */
		white-space: -moz-pre-wrap; /* Mozilla */
		white-space: -hp-pre-wrap; /* HP printers */
		white-space: -o-pre-wrap; /* Opera 7 */
		white-space: -pre-wrap; /* Opera 4-6 */
		white-space: pre; /* CSS2 */
		white-space: pre-wrap; /* CSS 2.1 */
		white-space: pre-line; /* CSS 3 (and 2.1 as well, actually) */
	}
	
	.back-img{
		width: 100%;
		height: 200upx;
		position: relative;
		background-color: #FF7159;
	}
	.back-img image{
		width: 100%;
		height: 100%;
		position: absolute;
	}
	.back-img-c{
		width: 100%;
		height: 100%;
		color: #fff;
		position: relative;
		z-index: 99;
		padding: 50upx;
	}
	.back-img-t{
		font-size: 32upx;
	}
	.back-img-b{
		font-size: 24upx;
	}
	.list-goods-name{
		width: 100% !important;
	}
	.invoice-type .uni-list-cell{
		display: inline-block;
		font-size: 26upx;
		color: #333;
		position: relative;
		margin-left: 50upx;
	}
	.invoice-type .uni-list-cell>view{
		display: inline-block;
	}
	.invoice-type-icon{
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
	}
	.invoice-type-c{
		margin-left: 50upx;
		line-height: 2;
	}
	.cell-item-ft .cell-bd-input{
		text-align: right;
		width: 500upx;
		font-size: 28upx;
	}
	.cell-item-bd .cell-bd-input{
		width: 100%;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	.right-img{
		border-bottom: 0;
	}
	.cell-textarea{
		padding: 0 26upx 20upx;
		font-size: 26upx;
		color: #333;
		word-wrap: break-word;
	}
	.evaluate-c-b{
		overflow: hidden;
		padding: 0 20upx;
	}
	.upload-img{
		width: 146upx;
		height: 146upx;
		margin: 14upx;
		text-align: center;
		color: #999999;
		font-size: 22upx;
		border: 2upx solid #E1E1E1;
		border-radius: 4upx;
		display: inline-block;
		float: left;
		padding: 24upx 0;
	}
	.goods-img-item{
		width: 174upx;
		height: 174upx;
		padding: 14upx;
		float: left;
		position: relative;
	}
	.goods-img-item:nth-child(4n){
		margin-right: 0;
	}
	.goods-img-item image{
		width: 100%;
		height: 100%;
	}
	.del{
		width: 30upx !important;
		height: 30upx !important;
		position: absolute;
		right: 0;
		top: 0;
		z-index: 999;
	}
	.black-text .cell-bd-text{
		font-size: 28upx;
	}
</style>
